<template>
	<view>
		<view class="memo-item" v-for="(m, i) in list" :key="i">
			<view class="memo-item-header">
				<text>{{m.time}}</text>
				<i class="iconfont icon icon-menu-cl" style="font-size: 48rpx;" />
			</view>
			<rich-text :nodes="m.nodes"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "c-memo",
		data() {
			return {
				list: [
					{
						time: '2021-10-02 10:35:55',
						nodes: [{"name":"div","children":[{"type":"text","text":"我的第一个标题"}]},{"name":"p","children":[{"type":"text","text":"我的第一个段落。"}]}]
					},
					{
						time: '2021-09-12 09:15:28',
						nodes: [{"name":"div","children":[{"type":"text","text":"我的第一个标题"}]},{"name":"p","children":[{"type":"text","text":"我的第一个段落。"}]}]
					},
					{
						time: '2021-09-07 23:25:50',
						nodes: [{"name":"div","children":[{"type":"text","text":"我的第一个标题"}]},{"name":"p","children":[{"type":"text","text":"我的第一个段落。"}]}]
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.memo-item {
		min-height: 140rpx;
		margin: 30rpx;
		background-color: #f0f3f6;
		box-shadow: 6rpx 6rpx 12rpx 0rpx #dde4ef, -6rpx -6rpx 12rpx -3rpx #FFF;
		border-radius: 30rpx;
		padding: 20rpx;
	}
	.memo-item-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 20rpx;
		line-height: 50rpx;
		color: rgba(23, 23, 23, 0.7);
	}
</style>
